<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Flex grid Test</title>
        <link rel="stylesheet" type="text/css" href="js/flexigrid-1.1/css/flexigrid.css" />
		<script type="text/javascript" src="js/jQuery/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="js/flexigrid-1.1/js/flexigrid.js"></script>
        <script type="text/javascript">
	        var $j = jQuery.noConflict();
	        $j(function() {
	        	$j("#flex1").flexigrid({
	        		url: 'basic/UserController/searchUser_flex.action',
	        		dataType: 'json',
	        		colModel : [
	        			{display: 'ISO', name : 'userId', width : 40, sortable : true, align: 'center'},
	        			{display: 'Name', name : 'userName', width : 180, sortable : true, align: 'left'},
	        			{display: 'Printable Name', name : 'password', width : 120, sortable : true, align: 'left'},
	        			{display: 'ISO3', name : 'email', width : 130, sortable : true, align: 'left', hide: false}
	        		],
	        		buttons: [{  
	                    name: '确定',  
	                    bclass: 'add',  
	                    onpress: function(com,grid) {
	        				var item = $j('.trSelected',grid)[0];
	        				alert(item);
	                    } //行选择后的操作  
	                }],  
	        		searchitems : [
	        			{display: 'ISO', name : 'iso'},
	        			{display: 'Name', name : 'name', isdefault: true}
	        		],
	        		sortname: "id",
	        		sortorder: "asc",
	        		usepager: true,
	        		title: 'Countries',
	        		useRp: true,
	        		rp: 15,
	        		showTableToggleBtn: true,
	        		width: 700,
	        		singleSelect: true,
	        		onSubmit: addFormData,
	        		height: 200,
	        		pagestat: '显示 {from} 到 {to} 条， 共{total}条记录',    
	        		procmsg: '正在获取数据，请稍候 ...'  
	        	});
	        	function addFormData(){
	        		//passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
	        		var dt = $j('#sform').serializeArray();
	        		$j("#flex1").flexOptions({params: dt});
	        		return true;
	        	}

	        	$j('#sform').submit(function (){
	        		$j('#flex1').flexOptions({newp: 1}).flexReload();
	        		return false;
	        	});
	        });
        </script>
    </head>
    <body>
        <table id="flex1" style="display:none"></table>
    </body>
</html>
